<!--  -->
<template>
  <div class="container">
    <div class="leftBox">
      <div class="head">
        <img
          src="img/tou.png"
          alt=""
        >
        <h1>Jason的简历</h1>
      </div>
      <div class="basicInfo">
        <h2 class="leftTitle">基本信息</h2>
        <ul>
          <li><span>名字：</span>Jason（姜敬胜）</li>
          <li><span>性别：</span>男</li>
          <li><span>毕业院校：</span>武汉理工大学</li>
          <li><span>毕业时间：</span>2015年7月</li>
          <li><span>博客：</span><a
              href="http://www.mangoya.cn"
              target="_blank"
            >www.mangoya.cn</a></li>
          <li><span>GitHub：</span><a
              href="https://github.com/Aimee1608"
              target="_blank"
            >www.github.com/Aimee1608 </a></li>
        </ul>
      </div>
      <div class="contact">
        <h2 class="leftTitle">联系方式</h2>
        <ul>
          <li><span><i class="fa fa-fw fa-phone"></i>电话：</span>17607171096</li>
          <li><span><i class="fa  fa-fw fa-envelope-o"></i>邮箱：</span>mrjiangsir@foxmail.com</li>
          <li><span><i class="fa fa-fw fa-wechat"></i>微信：</span>jiangjingsheng0513</li>
          <li><span><i class="fa fa-fw fa-qq"></i>QQ：</span>1006409611</li>
        </ul>
      </div>
      <div class="application">
        <h2 class="leftTitle">应聘岗位</h2>
        <p>java研发工程师</p>
      </div>
      <div class="aboutme">
        我是一个对java由衷热爱、有趣的java工程师。
        我目前正在寻找java工程师岗位的工作机会，希望在java开发领域，让我所掌握的技能落实到实处，献上一点绵薄之力！
      </div>
    </div>
    <div class="rightBox">

      <h3 class="rightTitle"><i class="fa fa-fw fa-rocket"></i>项目与工作经验</h3>
      <h4><img
          src="img/xingyuan.png"
          alt=""
        >北京行圆汽车信息技术有限公司（2017.1——至今）<a
          href="http://www.xingyuanauto.com/"
          target="_blank"
        ><i class="fa fa-fw fa-external-link"></i></a></h4>
      <ul class="itemList">
        <li>
          <div class="circle"></div>
          <h5>商务产品<a
              href="http://flow.xingyuanauto.com/webMove-h5/"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>
            负责商业营销类和功能类的H5前端主要研发工作，项目采用长图 <a
              href="https://h5.xingyuanauto.com/201711-New/roewe/?from=timeline&amp;isappinstalled=0"
              target="_blank"
            >（荣威汽车）</a>、分层视觉 <a
              href="https://h5.xingyuanauto.com/201712/audi100/?hmsr=audi100"
              target="_blank"
            >(奥迪100周年)</a>、答题
            <a
              href="https://h5.xingyuanauto.com/201709/dongnan_answer/"
              target="_blank"
            >（东南汽车）</a>、拼图 <a
              href="https://h5.xingyuanauto.com/Dongbiao/DbYongle/?hmsr=dbyongle"
              target="_blank"
            >（东标1）</a>、canvas动画 <a
              href="https://h5.xingyuanauto.com/Dongbiao/DbHottes/index.php?hmsr=dbhhuolajs"
              target="_blank"
            >(东标2)</a>、图片合成 <a
              href="https://h5.xingyuanauto.com/201706/father618/index.html?from=timeline&amp;isappinstalled=0"
              target="_blank"
            >（父亲节）</a>、360陀螺仪全景<a
              href="https://h5.xingyuanauto.com/201802/DealerYear/?hmsr=DealerYear"
              target="_blank"
            >（拜年H5）</a>等多种的形式
          </p>
          <p>
            使用 skrollr 、swiper、three.js、create.js等插件和AnimateCC 动画软件来实现前端动画效果，使用less编译css, 解决浏览器兼容性问题
          </p>
          <p>
            使用ajax异步请求数据，完成支付定位、微信平台开发等功能以及前后端数据交互
          </p>
          <p>
            使用vue.js和webpack开发单页面功能性项目
          </p>
          <p>
            持续优化相关产品的质量、性能、用户体验,构建H5高级动效和功能小插件
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>内部项目</h5>
          <p>
            大型电商平台系统——<a
              href="http://www.chitunion.com/"
              target="_blank"
            >赤兔联盟</a>的前端开发，该项目后端由.net 和java 实现，主要负责部分页面的ajax数据开发和功能实现，以及网站公共功能和模块的开发
          </p>
          <p>
            使用layui实现样式，ejs以及jquery实现前端数据的绑定，以及其他jquery插件完成相关组件的开发
          </p>
        </li>
      </ul>
      <h4><img
          src="img/zhongshang.png"
          alt=""
        >中商情大数据股份有限公司（2014.12——2016.12）<a
          href="http://www.askci.com/#"
          target="_blank"
        ><i class="fa fa-fw fa-external-link"></i></a></h4>
      <ul class="itemList">
        <li>
          <div class="circle"></div>
          <h5>中商情报网<a
              href="http://www.askci.com/"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>
            该项目是中商的新闻门户网站，大量的产业以及新闻数据展示。负责前端开发工作，包括页面布局，数据库渲染，分为 <a
              href="http://www.askci.com/"
              target="_blank"
            >PC版</a>和 <a
              href="http://m.askci.com/"
              target="_blank"
            >H5移动版</a>
          </p>
          <p>
            使用jquery、swiper等插件，实现页面布局和交互效果，优化网站的性能和用户体验
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>八方查数据网站<a
              href="http://8.askci.com/"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>
            该项目主要是中商企业注册等工商信息查询产品，负责canvas动画，响应式样式HTML5/CSS，实现AJAX请求，数据动态加载等前端开发工作，以及多条件嵌套查询等功能
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>千数堂<a
              href="http://d.askci.com/"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>该项目为商情数据的数据电商模块业务，商品为产品为各行业的产业数据，包括登录注册、首页、详情、购买、用户中心等页面模块，完整的电商平台</p>
          <p>
            负责canvas动画，响应式样式HTML5/CSS，实现多功能的交互和逻辑处理，相关组件的开发和封装
          </p>
          <p>
            使用 jquery easyui 实现组件样式，使用ajax实现动态数据交互
          </p>
          <p>
            <img
              src="img/qianshutang.png"
              alt=""
            >
          </p>
        </li>
      </ul>
      <h4>个人项目</h4>
      <ul class="itemList">
        <li>
          <div class="circle"></div>
          <h5>美食美荟小程序 <a
              href="https://github.com/Aimee1608/foodEveryDay"
              target="_blank"
            ><i class="fa fa-fw fa-github"></i></a> <a
              href="http://www.mangoya.cn/src/img/aimee/meishi.jpg"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>
            微信小程序出来后，由于本人有做饭的兴趣爱好，就开发了一个菜谱小程序
          </p>
          <p>
            针对于普通用户可以发布、点赞、收藏作品，还可以根据分类以及关键字搜索作品，对于管理员除了以上功能外，另外添加了审核用户发布的作品功能，可通过或者驳回，详细体验扫描下方二维码;后端使用PHP开发
          </p>
          <p>
            <img
              src="img/xiaochengxu.jpg"
              alt=""
              class="smallImg"
            >
            <img
              src="img/foodwx.png"
              alt=""
              class="bigImg"
            >
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>美食美荟网站 <a
              href="https://github.com/Aimee1608/foodWeb"
              target="_blank"
            ><i class="fa fa-fw fa-github"></i></a> <a
              href="http://food.mangoya.cn"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>
            根据美食美荟小程序，使用vue.js改版了一个网页版的美食美荟网站，兼容pc和移动端，但只有数据展示，没有用户登录模块了，后端接口同美食美荟相同
          </p>
          <p>
            使用 vue.js 框架和Element UI来实现前端组件及数据交互，使用node.js的 webpack 构建开发打包
          </p>
          <p>
            <img
              src="img/foodweb.png"
              alt=""
            >

          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>个人博客 <a
              href="https://github.com/Aimee1608/myblogvue"
              target="_blank"
            ><i class="fa fa-fw fa-github"></i></a> <a
              href="http://www.mangoya.cn"
              target="_blank"
            ><i class="fa fa-fw fa-external-link"></i></a></h5>
          <p>用于技术分享和总结的个人博客，兼容pc和移动端，用户可通过邮箱注册，邮箱验证通过后，可以登录博客，实现收藏点赞以及留言评论回复等功能，还可以展示个人链接，未登录状态可以以游客方式留言，后端使用PHP开发
          </p>
          <p>
            使用 vue.js 框架和Element UI来实现前端组件及数据交互，使用 webpack 构建，另外使用shCore.js实现代码样式
          </p>
          <p>
            挂在阿里云服务器上，通过远程桌面来维护修改
          </p>
          <p>
            <img
              src="img/blog.png"
              alt=""
            >
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>Aimee resume <a
              href="https://github.com/Aimee1608/aimeeResume"
              target="_blank"
            ><i class="fa fa-fw fa-github"></i></a></h5>
          <p>这个简历的源码,设计优雅、内容完善的静态简历页面,可下载world文档</p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>其他</h5>
          <p>日常中研究封装的一些小插件，360度查看产品展示，jquery版手风琴，jqueryEmoji表情包，加载遮罩模板封装，折叠留言楼层-递归等，可查看 <a
              href="https://github.com/Aimee1608"
              target="_blank"
            ><i class="fa fa-fw fa-github"></i></a>上的源代码</p>
        </li>
      </ul>

      <h3 class="rightTitle"><i class="fa fa-fw fa-rocket"></i>掌握技能</h3>
      <h4>前端</h4>
      <ul class="itemList">
        <li>
          <div class="circle"></div>
          <h5>HTML/CSS</h5>
          <p>
            能够编写语义化的 HTML，模块化的 CSS，完成较复杂的布局,熟练使用css3属性完成炫酷的H5动画效果
          </p>
          <p>
            熟悉Less等CSS预处理和模块化工具
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>JavaScript</h5>
          <p>
            熟悉原生 Javascript，能脱离 jQuery 等类库编码
          </p>
          <p>
            能够封装构造函数类插件及组件
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>框架类</h5>
          <p>
            能够熟悉使用vue.js框架并结合ElementUI进行模块化页面开发
          </p>
          <p>
            熟练使用css3属性结合swiper.js skrollr.js完成炫酷的H5动画效果
          </p>
          <p>
            熟练使用jquery插件，以及基于jquery开发的插件
          </p>
        </li>
      </ul>
      <h4>后端</h4>
      <ul class="itemList">
        <li>
          <div class="circle"></div>
          <h5>Node.js</h5>
          <p>
            了解node.js ,熟悉安装node模块，基于node.js 开发vue模块化的个人博客以及美食网站，并用webpack打包构建优化
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>PHP</h5>
          <p>
            了解PHP的语法，能看懂Thinkphp模块以及简单的写法，结合Navicat进行简单的数据录入以及增删改查
          </p>
        </li>
      </ul>
      <h4>其他</h4>
      <ul class="itemList">
        <li>
          <div class="circle"></div>
          <h5>小程序</h5>
          <p>
            能够熟悉工具类数据展示类样式类的小程序的开发，熟悉使用小程序开发调试工具，熟悉小程序开发流程及相关规则
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>AnimateCC</h5>
          <p>
            熟悉使用AnimateCC结合create.js开发炫酷交互类H5，并兼容移动端各种设备
          </p>
        </li>
        <li>
          <div class="circle"></div>
          <h5>软件类</h5>
          <p>
            了解PS软件的使用，能够对设计进行简单的修改；
          </p>
          <p>
            熟悉使用GoldWave剪辑音频
          </p>
          <p>
            熟练使用phpStudy部署本地服务器
          </p>
          <p>
            熟练使用Animate CC实现H5交互效果
          </p>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
export default {}
</script>
<style scoped>
/*reset*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
}
body {
  font-family: Arial, 'STHeiti', Helvetica, sans-serif;
  background: #fff;
  font-size: 14px;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
fieldset,
img {
  border: 0;
}
legend {
  display: none;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
  font-style: normal;
  font-weight: normal;
}
ol,
ul {
  list-style: none;
}
caption,
th {
  text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}
q:before,
q:after {
  content: '';
}
abbr,
acronym {
  border: 0;
}
html {
  -webkit-text-size-adjust: none;
  width: 100%;
  height: 100%;
}
/*????iphone??safari????????????*/
input[type='text'],
input[type='button'],
input[type='submit'],
input[type='search'] {
  -webkit-appearance: none;
  border-radius: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
html,
body {
  position: relative;
  color: #333;
  background: #ebebeb;
}
a {
  color: #df2050;
}
a:hover {
  color: #df2050;
  text-decoration: underline;
}
/****************************ï¿½ï¿½ï¿½ï¿½*****************************/
.container {
  width: 80%;
  height: auto;
  margin: 10px auto;
  position: relative;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  overflow: hidden;
  border-radius: 4px;
}
.container:after {
  content: '';
  display: block;
}
.leftBox {
  width: 350px;
  height: 100%;
  background: #394a5a;
  padding: 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
}
.leftBox .head {
  width: 100%;
  text-align: center;
  margin: 25px 0;
}
.leftBox .head img {
  border-radius: 50%;
  padding: 4px;
  background: #fff;
}
.leftBox .head h1 {
  color: #fff;
  font-size: 28px;
  font-weight: 400;
}
.leftBox div {
  position: relative;
}
.leftBox .leftTitle {
  height: 50px;
  line-height: 50px;
  width: 100%;
  position: relative;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  border-color: #6b3645;
  background-color: #b05051;
  margin: 5px 0 15px 30px;
  font-size: 22px;
  border-radius: 0 4px 0 0;
  display: inline-block;
  padding-left: 20px;
  box-sizing: border-box;
  color: #fff;
}
.leftBox .leftTitle::before {
  content: '';
  display: block;
  position: absolute;
  left: -19px;
  top: 0;
  width: 20px;
  height: 50px;
  background-color: #b05051;
  clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%, 0% 50%);
  -webkit-clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 80% 100%, 0% 50%);
}
.leftBox .leftTitle:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border-top: 0 solid transparent;
  border-left-width: 15px;
  border-left-color: inherit;
  border-left-style: solid;
  border-bottom: 15px solid transparent;
  border-right: 0 solid transparent;
  width: 0;
  height: 0;
}
.leftBox ul {
  padding-left: 50px;
  margin-bottom: 30px;
}
.leftBox ul li {
  color: #ddd;
  margin: 5px 0;
}
.leftBox ul li span {
  font-size: 16px;
  color: #abadb0;
  font-weight: bold;
}
.leftBox p {
  padding-left: 50px;
  color: #eee;
  font-size: 16px;
}
.leftBox .contact .leftTitle {
  border-color: #5a6238;
  background-color: #bdc293;
}
.leftBox .contact .leftTitle::before {
  background-color: #bdc293;
}
.leftBox .application .leftTitle {
  border-color: #887334;
  background-color: #dab652;
}
.leftBox .application .leftTitle::before {
  background-color: #dfb651;
}
.leftBox .aboutme {
  padding: 40px 20px 0 20px;
  color: #eee;
  line-height: 1.5;
  text-indent: 2em;
}
.rightBox {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px 40px 40px 400px;
  background: #fff;
}
.rightBox .rightTitle {
  font-size: 24px;
  color: #394a5a;
  line-height: 30px;
  border-bottom: 1px solid #394a5a;
  margin: 30px 0 15px -5px;
}
.rightBox h4 {
  font-size: 19px;
  color: #01579b;
  margin: 0 0 15px 5px;
  font-weight: bold;
}
.rightBox h4 img {
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
}
.rightBox h4 a {
  vertical-align: middle;
}
.rightBox .itemList {
  border-left: 2px solid #394a5a;
  margin-left: 15px;
}
.rightBox .itemList li {
  position: relative;
  top: -5px;
  margin: 0 0 20px 20px;
}
.rightBox .itemList li p {
  font-size: 15px;
  color: #616161;
  line-height: 23px;
  margin-bottom: 5px;
}
.rightBox .itemList li p img {
  max-width: 100%;
  max-height: 200px;
  object-fit: cover;
  vertical-align: middle;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
.rightBox .itemList li p .smallImg {
  width: 100px;
  height: 100px;
}
.rightBox .circle {
  height: 14px;
  width: 14px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #394a5a;
  float: left;
  position: absolute;
  left: -28px;
  top: 5px;
}
.rightBox h5 {
  line-height: 30px;
  font-size: 18px;
  bottom: 3px;
  font-weight: bold;
}
.footer {
  text-align: center;
  padding: 20px 0;
}
.footer .fa-heart {
  color: #df2050;
}
.review {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background: #fff;
  text-align: center;
  display: none;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
}
.review img {
  max-width: 70%;
  max-height: 100vh;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
@media screen and (min-width: 961px) {
  .container {
    width: 80%;
  }
}
@media screen and (max-width: 960px) and (min-width: 820px) {
  .container {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    box-shadow: none;
  }
  .rightBox {
    margin: 0;
    border-radius: 0 4px 4px 0;
  }
  .leftBox {
    border-radius: 4px 0 0 4px;
  }
}
@media screen and (max-width: 819px) {
  .container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: none;
  }
  .leftBox {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 4px 4px 0 0;
  }
  .rightBox {
    width: 100%;
    padding-left: 40px;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
  }
}
@media screen and (max-width: 376px) {
  .container {
    margin: 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 0;
  }
  .leftBox {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    border-radius: 0;
  }
  .rightBox {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 0;
  }
}
</style>
